<template>
  <mt-navbar
    v-if="dataList.length"
    :title="title"
    :bg-color="scrollTop < 10 ? 'rgba(0,0,0,0)' : '#1484EE'"
    left-icon-color="#ffffff"
    :title-style="{ color: '#ffffff' }"
  >
  </mt-navbar>
  <mt-navbar v-if="!dataList.length" :title="title"> </mt-navbar>
  <view v-if="dataList.length" class="absolute left-0 top-0 right-0 h-960rpx">
    <image class="w-full h-full" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/ranking-bg8.png"></image>
  </view>
  <view class="relative z-2 pb-40rpx">
    <!-- <view class="flex items-center justify-between px-32rpx">
      <view>
        <view class="text-center">
          <image class="w-190rpx h-32rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/ranking-bg6.png"></image>
        </view>
        <view class="text-center">
          <image class="w-268rpx h-62rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/ranking-bg7.png"></image>
        </view>
      </view>
      <view>
        <image class="w-348rpx h-348rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/ranking-bg5.png"></image>
      </view>
    </view> -->
    <view class="px-32rpx relative pt-40rpx">
      <uv-sticky>
        <view class="list-li flex items-center px-40rpx py-48rpx mb-40rpx" style="border-radius: 8rpx">
          <image
            class="avator w-116rpx h-116rpx rd-116rpx mr-32rpx"
            :src="
              currentItem.serviceProviderAvatarUrl
                ? currentItem.serviceProviderAvatarUrl
                : 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/default_avatar.png'
            "
          ></image>
          <view class="flex-1 min-w-0">
            <view class="mb-36rpx">
              <text class="text-32rpx text-#1A1A1A font-bold">{{ currentItem.serviceProviderName }}</text>
              <text class="text-24rpx text-#ADB0BD bg-#F5F5F5 rd-4rpx px-8rpx ml-8rpx">你</text>
            </view>
            <view class="flex">
              <view class="mr-48rpx">
                <view class="text-24rpx text-#727687 mb-16rpx">本月接单</view>
                <view class="text-32rpx text-#1C213E font-bold">{{ currentItem.thisMonthReceiveCount }}</view>
              </view>
              <view>
                <view class="text-24rpx text-#727687 mb-16rpx">上月贡献值</view>
                <view class="text-32rpx text-#1C213E font-bold">{{ currentItem.lastMonthContributionValue }}</view>
              </view>
            </view>
          </view>
          <image
            v-if="currentItem.rankNo === 1"
            class="w-78rpx h-78rpx ml-16rpx"
            src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-cup1.svg"
          ></image>
          <image
            v-else-if="currentItem.rankNo === 2"
            class="w-78rpx h-78rpx ml-16rpx"
            src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-cup2.svg"
          ></image>
          <image
            v-else-if="currentItem.rankNo === 3"
            class="w-78rpx h-78rpx ml-16rpx"
            src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-cup3.svg"
          ></image>
          <view v-else class="w-78rpx h-78rpx ml-16rpx ChuangKeTieJinGangTi text-center text-48rpx text-#CED0D8 line-height-78rpx">{{
            currentItem.rankNo
          }}</view>
        </view>
      </uv-sticky>

      <view
        v-for="(item, index) in dataList"
        :key="index"
        class="list-li flex items-center px-40rpx py-48rpx"
        :class="{ first: index === 0, second: index === 1, third: index === 2 }"
      >
        <image
          class="avator w-116rpx h-116rpx rd-116rpx mr-32rpx"
          :src="
            item.serviceProviderAvatarUrl
              ? item.serviceProviderAvatarUrl
              : 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/default_avatar.png'
          "
        ></image>
        <view class="flex-1 min-w-0">
          <view class="mb-36rpx">
            <text class="text-32rpx text-#1A1A1A font-bold">{{ item.serviceProviderName }}</text>
          </view>
          <view class="flex">
            <view class="mr-48rpx">
              <view class="text-24rpx text-#727687 mb-16rpx">本月接单</view>
              <view class="text-32rpx text-#1C213E font-bold">{{ item.thisMonthReceiveCount }}</view>
            </view>
            <view>
              <view class="text-24rpx text-#727687 mb-16rpx">上月贡献值</view>
              <view class="text-32rpx text-#1C213E font-bold">{{ item.lastMonthContributionValue }}</view>
            </view>
          </view>
        </view>
        <image
          v-if="index === 0"
          class="w-78rpx h-78rpx ml-16rpx"
          src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-cup1.svg"
        ></image>
        <image
          v-else-if="index === 1"
          class="w-78rpx h-78rpx ml-16rpx"
          src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-cup2.svg"
        ></image>
        <image
          v-else-if="index === 2"
          class="w-78rpx h-78rpx ml-16rpx"
          src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-cup3.svg"
        ></image>
        <view v-else class="w-78rpx h-78rpx ml-16rpx ChuangKeTieJinGangTi text-center text-48rpx text-#CED0D8 line-height-78rpx">{{
          item.rankNo
        }}</view>
      </view>

      <view v-if="!dataList.length" class="pt-300rpx">
        <mt-empty-view></mt-empty-view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { cluegetProductReceiveClueRankList } from '@/subProduct/api/index';
import userStore from '@/store/user';

const user = userStore();

const title = ref('产品详情');
const dataList = ref([]);
const currentItem = ref(null);
function getDetail(productId) {
  cluegetProductReceiveClueRankList({ productId }).then((res) => {
    const list = res.data;
    if (list.length) {
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#1484EE'
      });
    }
    currentItem.value = list.find((son) => son.distributionServiceProviderId === user.userInfo.providerId);
    dataList.value = list;
  });
}

const scrollTop = ref(0);
onPageScroll((e) => {
  scrollTop.value = e.scrollTop;
});

onLoad((options) => {
  title.value = options.title;
  getDetail(options.productId);
});
</script>

<style lang="scss" scoped>
.list-li {
  background-color: #ffffff;
  border-bottom: 2rpx solid #e6e6e6;
  &.first {
    border-radius: 8rpx 8rpx 0 0;
    background: linear-gradient(90deg, #fdf7ed, #ffffff);
    border-bottom: none;
  }
  &.second {
    background: linear-gradient(90deg, #f5faff, #ffffff);
    border-bottom: none;
  }
  &.third {
    background: linear-gradient(90deg, #fdf3ec, #ffffff);
    border-bottom: none;
  }
  &:last-of-type {
    border-radius: 0 0 8rpx 8rpx;
    border-bottom: none;
  }
}
</style>
